Pie Chart এবং Donut Chart হল দুটি জনপ্রিয় ডেটা ভিজুয়ালাইজেশন চার্ট, যা Highcharts লাইব্রেরি ব্যবহার করে সহজেই তৈরি করা যায়। এই চার্টগুলো সাধারণত ডেটার বিভিন্ন অংশের অনুপাত প্রদর্শন করতে ব্যবহৃত হয়, যেমন বিক্রির অংশ, মার্কেট শেয়ার, বা কোনো নির্দিষ্ট সময়ে বিভিন্ন ক্যাটাগরির ডেটা ভাগ।
Pie Chart তৈরি
Pie Chart একটি গোলাকার চার্ট যা একটি পূর্ণ চক্রে বিভিন্ন অংশের অনুপাত বা শতাংশ প্রদর্শন করে। এখানে একটি সাধারণ Pie Chart তৈরির উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Pie Chart Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'বিক্রির ভাগ'
},
series: [{
name: 'বিক্রির ভাগ',
data: [
['প্রোডাক্ট A', 45],
['প্রোডাক্ট B', 30],
['প্রোডাক্ট C', 25]
]
}]
});
</script>
</body>
</html>
এই কোডে একটি Pie Chart তৈরি করা হয়েছে যা তিনটি প্রোডাক্টের বিক্রির অনুপাত প্রদর্শন করে।
Donut Chart তৈরি
Donut Chart আসলে একটি Pie Chart এরই উন্নত সংস্করণ, যা কেন্দ্রে একটি ফাঁকা অংশ রেখে থাকে। এই চার্টটি একইভাবে কাজ করে, তবে এটি দেখতে আরও আধুনিক এবং visually appealing। নিচে একটি Donut Chart তৈরির উদাহরণ দেয়া হলো:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Donut Chart Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'বিক্রির অংশ (Donut)'
},
plotOptions: {
pie: {
innerSize: '50%' // Donut shape
}
},
series: [{
name: 'বিক্রির অংশ',
data: [
['প্রোডাক্ট A', 45],
['প্রোডাক্ট B', 30],
['প্রোডাক্ট C', 25]
]
}]
});
</script>
</body>
</html>
এখানে innerSize প্রপার্টি ব্যবহার করা হয়েছে, যা চার্টটির কেন্দ্রে একটি ফাঁকা অংশ তৈরি করে, এটি একটি Donut Chart এ পরিণত করে।
Pie এবং Donut Chart এর কাস্টমাইজেশন
Highcharts এর Pie এবং Donut Chart কাস্টমাইজ করার জন্য অনেক অপশন রয়েছে। নিচে কিছু সাধারণ কাস্টমাইজেশন অপশন আলোচনা করা হলো:
১. রঙ কাস্টমাইজেশন
আপনি আপনার চাহিদা অনুযায়ী চার্টের বিভিন্ন অংশের রঙ পরিবর্তন করতে পারেন।
colors: ['#ff0000', '#00ff00', '#0000ff']
২. টুলটিপ কাস্টমাইজেশন
টুলটিপের মেসেজ বা আউটপুট কাস্টমাইজ করতে পারেন।
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
}
৩. ডেটা লেবেল কাস্টমাইজেশন
আপনি প্রতিটি পিসের উপর লেবেল যোগ করতে পারেন, যা ডেটার শতাংশ বা মান দেখায়।
dataLabels: {
enabled: true,
format: '{point.name}: {point.percentage:.1f}%' // percentage display
}
৪. অ্যানিমেশন
Highcharts এ চার্ট তৈরির সময় আপনি অ্যানিমেশন প্রয়োগ করতে পারেন।
plotOptions: {
pie: {
animation: {
duration: 1000
}
}
}
৫. লিজেন্ড কাস্টমাইজেশন
চার্টের লিজেন্ড কাস্টমাইজ করতে পারেন।
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top'
}
উপসংহার
Highcharts এর মাধ্যমে Pie এবং Donut Chart তৈরি এবং কাস্টমাইজেশন খুবই সহজ। আপনি সহজেই ডেটার অনুপাত বা অংশ প্রদর্শন করতে পারেন এবং বিভিন্ন রঙ, টুলটিপ, ডেটা লেবেল, এবং অ্যানিমেশন ইত্যাদি কাস্টমাইজ করতে পারেন। Highcharts এর এই ক্ষমতাগুলি আপনার ডেটা ভিজুয়ালাইজেশনকে আরও বেশি ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করে তোলে।
Read more
